<template>
  <div>
    <el-table
      :data="tableList"
      style="width: 100%"
      tooltip-effect="dark"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="序号" width="80">
        <template slot-scope="scope">
          <span>{{ (pageIndex - 1) * 10 + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <!-- 表格内容, prop 与传入 数据数组中每一项对应 -->
      <el-table-column prop="innerCode" label="设备编号"> </el-table-column>
      <!-- <el-table-column label="年龄">
        <template slot-scope="scope">
          {{ scope.row.age }} -->
      <!-- 插槽写法, 与 prop="age" 效果相同, 特殊情况可使用 -->
      <!-- </template>
      </el-table-column> -->
      <el-table-column prop="type.name" label="设备型号"> </el-table-column>
      <el-table-column prop="node.name" label="详细地址"> </el-table-column>
      <el-table-column prop="node.ownerName" label="合作商"> </el-table-column>
      <el-table-column prop="vmStatus"  label="设备状态"> </el-table-column>
      <el-table-column label="操作" width="200" show-overflow-tooltip>
        <!-- 三个操作按钮 点击 触发对应三个父组件函数, 并传出 当前行信息 (scope.row) -->
        <template slot-scope="scope">
          <span class="blue" @click="$emit('look', scope.row)">货道</span>&emsp;
          <span class="blue" @click="$emit('alter', scope.row)">策略</span
          >&emsp;
          <span class="red" @click="$emit('del', scope.row)">修改</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    // 数据列表
    tableList: {
      type: Array,
      require: true
    },
    // 页数, 渲染序号使用
    pageIndex: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      multipleSelection: []
      // loading: true
    }
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
      this.$emit('change', this.multipleSelection)
    }
  }
  // mounted () {
  //   if (this.tableList) {
  //     this.loading = false
  //   }
  // }
}
</script>

<style lang="scss" scoped>
.el-table {
  width: 100%;
  ::v-deep .el-table__header-wrapper {
    .el-table__header {
      width: 100% !important;
      thead tr {
        border-radius: 5px;
        overflow: hidden;
        th {
          background-color: #f3f6f8;
          color: #666;
          border: 0;
        }
      }
    }
  }
  ::v-deep .el-table__body-wrapper {
    .el-table__body {
      width: 100% !important;
      tbody tr td {
        border: 0;
      }
    }
  }
}
</style>
